<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Basic ePubJS Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <meta name="apple-mobile-web-app-capable" content="yes">


        <!-- EPUBJS Renderer -->
        <script src="../../build/epub.js"></script>

        <style type="text/css">

          body {
            overflow: hidden;
          }

          #main {
            position: absolute;
            width: 100%;
            height: 100%;
          }

          #area {
            width: 80%;
            height: 80%;
            margin: 5% auto;
            max-width: 1250px;
          }

          #area iframe {
            border: none;
          }

          #prev {
            left: 40px;
          }

          #next {
            right: 40px;
          }

          .arrow {
            position: absolute;
            top: 50%;
            margin-top: -32px;
            font-size: 64px;
            color: #E2E2E2;
            font-family: arial, sans-serif;
            font-weight: bold;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
          }

          .arrow:hover {
            color: #777;
          }

          .arrow:active {
            color: #000;
          }
        </style>

         <script>
            "use strict";
            function Tran(text)
            {
                var str = text.replace(/<[^>]+>/g,"");
                var url = 'http://www.neat-reader.cn/api/translate?text=' + encodeURI(str);
                var xmlHttp = new window.XMLHttpRequest();
                xmlHttp.open("GET", url, false);
                xmlHttp.send(null);
                try
                {
                    var result = JSON.parse(JSON.parse(xmlHttp.response).data).trans_result[0].dst;
                    return result;
                }
                catch(e){}

            }

            function insertAfter(newNode, referenceNode) {
                referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
            }
             EPUBJS.Hooks.register("beforeChapterDisplay").translate = function(callback, renderer){
                        var elements = renderer.doc.querySelectorAll('p');
                        var news = [];
                        elements.forEach(function(ele) {
                            var dst = Tran(ele.innerHTML);
                            if (dst) {
                                var newnode = ele.cloneNode(true);
                                newnode.innerHTML = dst;
                                news.push(newnode);
                                news.push(ele);

                            }
                          console.log(ele.innerHTML);

                        });
                        for(var i =0;i < news.length -1;i=i+2)
                        {
                            insertAfter(news[i],news[i+1]);
                        }


                        if(callback) callback();



                    }
            var Book = ePub("../mybook/");
             Book.on('renderer:locationChanged', function(locationCfi){
                localStorage["cfi"] =locationCfi ;
            });

        </script>
    </head>
    <body>
        <div id="main">
          <div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
          <div id="area"></div>
          <div id="next" onclick="Book.nextPage();" class="arrow">›</div>
        </div>

        <script>

            Book.renderTo("area");
          	Book.gotoCfi(localStorage["cfi"]);

        </script>
    </body>
</html>
